<script lang="ts" setup>
import SuperTable from "@/module/table/superTable.vue";
import {SetMeal} from "@/dto/Main/SetMeal.ts";
import SuperButton from "@/module/button/superButton.vue";
import {ref} from "vue";
import {SetMealApi} from "@/api/Main/SetMealApi.ts";
import {Page} from "@/common/Page.ts";
import SuperDialog from "@/module/dialog/superDialog.vue";
import Upload from "@/module/upload/upload.vue";
import {ElMessage} from "element-plus";
import {Message, MessageBox} from "@/module/message/Message.ts";
import ImageView from "@/module/image/ImageView.vue";

const api = ref(new SetMealApi())
const setMeal = ref(new SetMeal())
const tableData = ref<Array<SetMeal>>([])
const page = ref(Page.initPage)
const editDialog = ref(false)

async function initTableData() {
    let search = new SetMeal(page.value.pageSize, page.value.page)
    let result = await api.value.pageAll(search)
    tableData.value = result.data?.content ?? []
    page.value.total = result.data?.totalElements ?? 0;
}


function add() {
    setMeal.value = new SetMeal()
    editDialog.value = true
}

function edit(row:SetMeal){
    setMeal.value = {...row}
    editDialog.value = true
}

function deleted(row:SetMeal){
    setMeal.value = {...row}
    MessageBox.confirm_deleted(async ()=>{
        await api.value.deleted(setMeal.value)
        await initTableData()
        Message.success("删除成功")
    })
}

async function save(){
    await api.value.edit(setMeal.value);
    editDialog.value = false
    await initTableData()
    Message.success("保存成功")
}

</script>

<template>
    <super-table
            :data="tableData"
            @init="initTableData"
            :column-list="SetMeal.getColumn()"
            :page="page">
        <template #header-button>
            <super-button title="添加套餐" type="success" @click="add"/>
        </template>
        <template #column="{row,column}">
            <template v-if="column.prop === 'img'">
                <image-view v-model="row[column.prop]"/>
            </template>
        </template>
        <template #controls="{row}">
            <super-button title="编辑" type="success" @click="edit(row)"/>
            <super-button title="删除" type="danger" @click="deleted(row)"/>
        </template>
    </super-table>
    <super-dialog title="添加套餐" width="400" v-model="editDialog">
        <template #context>
            <el-form>
                <el-form-item label="图片">
                    <upload v-model="setMeal.img" type="image"/>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="setMeal.title"/>
                </el-form-item>
                <el-form-item label="标题">
                    <el-select v-model="setMeal.series" placeholder="请选择系列">
                        <el-option value="自然系列"/>
                        <el-option value="主题系列"/>
                        <el-option value="精选周边"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额">
                    <el-input v-model="setMeal.money"/>
                </el-form-item>
                <el-form-item label="文字">
                    <el-input v-model="setMeal.text" type="textarea"/>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <super-button title="取消" type="info" @click="()=>editDialog = false"/>
            <super-button title="保存" type="success" @click="save"/>
        </template>
    </super-dialog>
</template>

<style scoped>

</style>